import { useState, useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { getHealthInfo, type HealthInfo } from '../../api/outpatient'
import './index.css'

function HealthInfoDetailPage() {
  const navigate = useNavigate()
  const { id } = useParams<{ id: string }>()
  
  const [article, setArticle] = useState<HealthInfo | null>(null)
  const [loading, setLoading] = useState(true)
  const [isLiked, setIsLiked] = useState(false)
  const [isCollected, setIsCollected] = useState(false)

  // 加载文章详情
  const loadArticleDetail = async () => {
    setLoading(true)
    try {
      const allArticles = await getHealthInfo()
      const articleId = parseInt(id || '1')
      const foundArticle = allArticles.find(a => a.id === articleId)
      
      if (foundArticle) {
        setArticle(foundArticle)
      } else {
        console.error('文章不存在')
        navigate('/health-info')
      }
    } catch (error) {
      console.error('加载文章详情失败:', error)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    if (id) {
      loadArticleDetail()
    }
  }, [id])

  // 处理点赞
  const handleLike = () => {
    setIsLiked(!isLiked)
  }

  // 处理收藏
  const handleCollect = () => {
    setIsCollected(!isCollected)
  }

  // 格式化时间
  const formatTime = (timeStr: string) => {
    const date = new Date(timeStr)
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
  }

  if (loading) {
    return (
      <div style={{ 
        minHeight: '100vh', 
        background: '#f5f5f5',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }}>
        <div style={{ color: '#999', fontSize: 16 }}>加载中...</div>
      </div>
    )
  }

  if (!article) {
    return (
      <div style={{ 
        minHeight: '100vh', 
        background: '#f5f5f5',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }}>
        <div style={{ color: '#999', fontSize: 16 }}>文章不存在</div>
      </div>
    )
  }

  return (
    <div style={{ minHeight: '100vh', background: '#f5f5f5' }}>
      {/* 顶部导航 */}
      <div style={{ 
        background: '#fff', 
        padding: '12px 16px', 
        borderBottom: '1px solid #eee',
        position: 'sticky',
        top: 0,
        zIndex: 100
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <button 
              onClick={() => navigate(-1)}
              style={{ 
                border: 'none', 
                background: 'none', 
                fontSize: 18, 
                marginRight: 12,
                cursor: 'pointer'
              }}
            >
              ←
            </button>
            <h1 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>
              资讯详情
            </h1>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <button style={{ 
              border: 'none', 
              background: 'none', 
              fontSize: 16,
              cursor: 'pointer',
              padding: '4px 8px'
            }}>
              ⋯
            </button>
          </div>
        </div>
      </div>

      {/* 文章内容 */}
      <div style={{ background: '#fff', margin: '12px', borderRadius: 12, overflow: 'hidden' }}>
        {/* 文章标题 */}
        <div style={{ padding: '20px 16px 16px' }}>
          <h1 style={{ 
            margin: 0, 
            fontSize: 20, 
            fontWeight: 700,
            lineHeight: 1.4,
            color: '#333'
          }}>
            {article.title}
          </h1>
        </div>

        {/* 文章封面 */}
        {article.cover && (
          <div style={{ padding: '0 16px 16px' }}>
            <img 
              src={article.cover} 
              alt={article.title}
              style={{ 
                width: '100%', 
                height: 200, 
                borderRadius: 8, 
                objectFit: 'cover'
              }}
            />
          </div>
        )}

        {/* 作者信息 */}
        <div style={{ 
          padding: '0 16px 16px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ 
              width: 32, 
              height: 32, 
              borderRadius: '50%', 
              background: '#e8f3ff',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 14,
              color: '#1677ff'
            }}>
              👨‍⚕️
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: '#333' }}>
                刘医生
              </div>
              <div style={{ fontSize: 12, color: '#666' }}>
                主任医师 · 门诊外一科 四川省保健院南苑
              </div>
            </div>
          </div>
          <button style={{
            padding: '6px 12px',
            background: '#1677ff',
            color: '#fff',
            border: 'none',
            borderRadius: 6,
            fontSize: 12,
            cursor: 'pointer'
          }}>
            关注
          </button>
        </div>

        {/* 阅读量 */}
        <div style={{ 
          padding: '0 16px 16px',
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          color: '#999',
          fontSize: 12
        }}>
          <span>◎</span>
          <span>{article.views}人已读</span>
        </div>

        {/* 文章正文 */}
        <div style={{ padding: '0 16px 20px' }}>
          {article.summary && (
            <div style={{ 
              fontSize: 16, 
              lineHeight: 1.8,
              color: '#333',
              marginBottom: 16
            }}>
              {article.summary}
            </div>
          )}
          
          {/* 这里可以添加更多的文章内容 */}
          <div style={{ 
            fontSize: 16, 
            lineHeight: 1.8,
            color: '#333'
          }}>
            <p>这是一篇关于健康资讯的详细内容。文章包含了丰富的健康知识和实用的建议，帮助读者更好地了解相关健康话题。</p>
            
            <h3 style={{ fontSize: 18, fontWeight: 600, margin: '20px 0 12px 0' }}>
              主要内容包括：
            </h3>
            
            <ol style={{ paddingLeft: 20, margin: 0 }}>
              <li style={{ marginBottom: 12 }}>
                <strong>健康知识普及：</strong>详细介绍相关的健康概念和基础知识
              </li>
              <li style={{ marginBottom: 12 }}>
                <strong>预防措施：</strong>提供实用的预防方法和注意事项
              </li>
              <li style={{ marginBottom: 12 }}>
                <strong>治疗建议：</strong>介绍相关的治疗方法和康复建议
              </li>
              <li style={{ marginBottom: 12 }}>
                <strong>生活指导：</strong>给出日常生活中的健康指导建议
              </li>
            </ol>
            
            <p style={{ marginTop: 20 }}>
              通过阅读本文，您将获得全面的健康知识，帮助您更好地维护身体健康，预防疾病的发生。
            </p>
          </div>
        </div>

        {/* 标签和发布时间 */}
        <div style={{ 
          padding: '0 16px 16px',
          borderTop: '1px solid #f0f0f0',
          paddingTop: 16
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ 
              fontSize: 12, 
              color: '#6b7aff',
              background: '#f0f2ff',
              padding: '4px 8px',
              borderRadius: 4
            }}>
              {article.tag}
            </span>
            {article.publishTime && (
              <span style={{ fontSize: 12, color: '#999' }}>
                发布于{formatTime(article.publishTime)}
              </span>
            )}
          </div>
        </div>
      </div>

      {/* 底部交互栏 */}
      <div style={{ 
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        background: '#fff',
        borderTop: '1px solid #eee',
        padding: '12px 16px',
        display: 'flex',
        alignItems: 'center',
        gap: 16
      }}>
        <button style={{
          flex: 1,
          padding: '8px 16px',
          background: '#f5f5f5',
          color: '#666',
          border: 'none',
          borderRadius: 8,
          fontSize: 14,
          cursor: 'pointer'
        }}>
          暂无法评论
        </button>
        
        <button 
          onClick={handleCollect}
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 4,
            padding: '8px 12px',
            background: 'none',
            border: 'none',
            color: isCollected ? '#ff6b6b' : '#666',
            fontSize: 14,
            cursor: 'pointer'
          }}
        >
          <span style={{ fontSize: 16 }}>❤️</span>
          <span>收藏</span>
        </button>
        
        <button 
          onClick={handleLike}
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 4,
            padding: '8px 12px',
            background: 'none',
            border: 'none',
            color: isLiked ? '#ff6b6b' : '#666',
            fontSize: 14,
            cursor: 'pointer'
          }}
        >
          <span style={{ fontSize: 16 }}>👍</span>
          <span>点赞({isLiked ? article.likes + 1 : article.likes})</span>
        </button>
      </div>

      {/* 底部占位，防止内容被遮挡 */}
      <div style={{ height: 80 }}></div>
    </div>
  )
}

export default HealthInfoDetailPage

